{extend name="common:base" /}
{block name="page_current"}
<div class="fui-page-group statusbar">
    <div class="fui-page fui-page-current member-cart-page" id="app">
        <div class="fui-header">
            <div class="fui-header-left">
                <a class="back"></a>
            </div>
            <div class="title">我的购物车</div>
            <div class="fui-header-right">
                <a class="btn-edit" v-show="false == edit_mode" @click="changeMode">编辑</a>
                <a class="btn-edit" v-show="edit_mode" @click="changeMode">完成</a>
            </div>
        </div>
        <div class="fui-content navbar cart-list" style="bottom: 4.9rem;" v-show="isLoad">
            <div id="cart_container">
                <div class="content-empty" v-show="carts.length < 1">
                    <img src="__STATIC__/m/imgs/nogoods.png" style="width: 6rem;margin-bottom: .5rem;">
                    <br>
                    <p style="color: #999;font-size: .75rem">您的购物车中没有商品哦！</p>
                    <br>
                    <a href="{:url('m/Index/index')}" class="btn btn-sm btn-danger-o external" style="border-radius: 100px;height: 1.9rem;line-height:1.9rem;width:  7rem;font-size: .75rem">去首页逛逛吧</a>
                </div>
                <div class="fui-list-group"  id="container" style="margin-top: 0" v-show="carts.length > 0">
                    <div class="fui-list goods-item align-start" v-for="(item, index) of carts"
                         :data-cartid="item.cart_id" :data-goodsid="item.goods_id" :data-optionid="item.option_id" :data-type="item.type">
                        <div class="fui-list-media">
                            <input type="checkbox" name="checkbox" class="fui-radio fui-radio-danger cartmode check-item" v-model="item.selected">
                        </div>
                        <div class="fui-list-media image-media">
                            <a href="javascript:;" @click="goGoodsDetail(item.goods_id)">
                                <img class="" :src="item.goods_thumbs">
                            </a>
                        </div>
                        <div class="fui-list-inner">
                            <a href="javascript:;" @click="goGoodsDetail(item.goods_id)">
                                <div class="subtitle">
                                    {{ item.goods_name }}
                                </div>
                                <div class="text cart-option cartmode">
                                    <template v-if="item.option_specs != '-----'">
                                        <div class="choose-option">{{ item.option_title }}</div>
                                    </template>
                                </div>
                            </a>
                            <div class="price">
                                <span class="bigprice text-danger">
                                    <span>¥</span>
                                    <span class="marketprice">{{ item.goods_price }}</span>
                                    <span class="productprice">¥{{ item.old_market_price }}</span>
                                </span>
                                <div class="fui-number small">
                                    <div :class="['minus',item.total < 2 ? 'disabled' : '']" @click="itemMinus(item);">-</div>
                                    <input class="num shownum" type="tel" :value="item.total">
                                    <div :class="['plus',item.total >= item.max_total ? 'disabled' : '']" @click="itemPlus(item);">+</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer_container">
            <div class="fui-footer cartmode" style="bottom: 2.45rem" v-show="false == edit_mode">
                <div class="fui-list noclick">
                    <div class="fui-list-media">
                        <label class="checkbox-inline checkall">
                            <input type="checkbox" name="checkbox" class="fui-radio fui-radio-danger"
                                   :checked="isSelectAll" @click="clickSelectAll">&nbsp;全选
                        </label>
                    </div>
                    <div class="fui-list-inner">
                        <div class="subtitle">合计:<span class="text-danger bigprice"> ￥</span><span class="text-danger totalprice bigprice">{{ totalPrice }}</span></div>
                        <div class="text">不含运费</div>
                    </div>
                    <div class="fui-list-angle">
                        <div style="width:5rem;" :class="['btn','btn-submit','btn-danger',selectCount > 0 ? '' : 'disabled']"
                             @click="gotoSubmit">结算(<span class="total">{{ selectCount }}</span>)</div>
                    </div>
                </div>
            </div>
            <div class="fui-footer" style="bottom: 2.45rem" v-show="edit_mode">
                <div class="fui-list noclick">
                    <div class="fui-list-media">
                        <label class="checkbox-inline editcheckall">
                            <input type="checkbox" name="checkbox" class="fui-radio fui-radio-danger"
                                   :checked="isSelectAll" @click="clickSelectAll">&nbsp;全选
                        </label>
                    </div>
                    <div class="fui-list-inner"></div>
                    <div class="fui-list-angle">
                        <!--<div class="btn btn-default btn-favorite disabled attention">移到关注</div>-->
                        <div :class="['btn','btn-delete','btn-danger',selectCount > 0 ? '' : 'disabled']" @click="delCart">删除</div>
                    </div>
                </div>
            </div>
        </div>
        {include file="common/footer_bar_nav" /}
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script>
        var isLoad = false;
        var vmPage = new Vue({
            el: '#app',
            data:{
                carts:[]
                ,edit_mode:false
                ,selectedAll:false
                ,isLoad:false
            }
            ,
            mounted: function () {
                isLoad = true;
            }
            ,computed:{
                selectCount:function () {
                    var num = 0;
                    var that = this;
                    for (var i = 0;i < that.carts.length; i++){
                        if(that.carts[i].selected){
                            num++;
                        }
                    }
                    // if(that.carts.length > 0 && true == isLoad){
                        // cartChange();
                    // }
                    return num;
                }
                ,
                totalPrice:function () {
                    var totalPrice = 0;
                    var that = this;
                    for (var i = 0;i < that.carts.length; i++){
                        if(that.carts[i].selected){
                            totalPrice += that.carts[i].goods_price * that.carts[i].total;
                        }
                    }
                    return core.number_format(totalPrice,2);
                }
                ,
                isSelectAll:function () {
                    var that = this;
                    if(that.carts.length < 1){
                        return false;
                    }
                    return that.selectCount == that.carts.length;
                }
            }
            ,methods:{
                itemMinus:function (_item) {
                    if(_item.total < 2){
                        return;
                    }
                    _item.total--;
                    // _item.selected = 1;

                    // cartChange();
                    cartChangeTotal(_item.cart_id, _item.total);
                }
                ,
                itemPlus:function (_item) {
                    _item.total++;
                    // _item.selected = 1;

                    // cartChange();
                    cartChangeTotal(_item.cart_id, _item.total);
                }
                ,
                changeMode:function () {
                    this.edit_mode = !this.edit_mode;
                }
                ,
                clickSelectAll:function () {
                    var that = this;
                    if(that.selectCount == that.carts.length){
                        // 全选状态 ， 再次点击说明取消全选
                        for (var i = 0;i < that.carts.length; i++){
                            that.carts[i].selected = 0;
                        }
                    }
                    else {
                        for (var i = 0;i < that.carts.length; i++){
                            that.carts[i].selected = 1;
                        }
                    }
                    // cartChange();
                }
                ,
                gotoSubmit:function () {
                    var that = this;
                    if(that.selectCount < 1){
                        return;
                    }
                    var cartIds = [];
                    var goodsIds = [];
                    var totals = [];
                    for (var i = 0;i < that.carts.length; i++){
                        if(that.carts[i].selected){
                            cartIds.push(that.carts[i].cart_id)
                            goodsIds.push(that.carts[i].goods_id)
                            totals.push(that.carts[i].total)
                        }
                    }
                    if(cartIds.length < 1){
                        FoxUI.alert('请选择要结算的商品');
                        return;
                    }
                    // $.router.load("{:url('m/Order/create')}?ids=" + goodsIds.join(',') + '&total=' + totals.join(',') , true)
                    location.href = "{:url('m/Order/create')}?cart_ids=" + cartIds.join(',') + '&total=' + totals.join(',');
                    // location.replace("{:url('m/Order/create')}?cart_ids=" + cartIds.join(',') + '&total=' + totals.join(','));
                    // 保存到缓存，防止后退不选中的问题
                    core.setCartTmpSelectedGoodsId(goodsIds);
                }
                ,
                delCart:function () {
                    FoxUI.confirm('确定要删除吗？','提示',function () {
                        delCart()
                    })
                }
                ,
                goGoodsDetail:function (_id) {
                    var baseGoodsDetailUrl = "{:url('m/Goods/detail')}";
                    // $.router.load(baseGoodsDetailUrl + '?id=' + _id);
                    location.href = baseGoodsDetailUrl + '?id=' + _id;
                }
            }
            ,
            watch:{
            }
        });

        function getCartList() {
            core.json("{:url('m/Member/cart')}",{},function (json) {
                if(json.code){
                    var selected = core.getCartTmpSelectedGoodsId();
                    if (selected) {
                        for (var i = 0; i < json.data.length; i++) {
                            if(selected.$include(json.data[i].goods_id)){
                                json.data[i].selected = 1;
                            }
                        }
                    }
                    vmPage.carts = json.data;

                    vmPage.isLoad = true;
                }
            },true,false);
        }
        /**
         * 更新商品数量
         * @param _cartId
         * @param _total
         */
        function cartChangeTotal(_cartId,_total){
            core.json("{:url('m/Cart/cart_change')}",{cart_id:_cartId,total:_total},function (json) {},false,false);
        }

        /**
         * 删除商品
         */
        function delCart(){
            var cartIds = [];
            for (var i = 0;i < vmPage.carts.length; i++){
                if(vmPage.carts[i].selected){
                    cartIds.push(vmPage.carts[i].cart_id);
                }
            }
            core.json("{:url('m/Cart/del_cart')}",{cart_ids:cartIds.join(',')},function (json) {
                FoxUI.toast.show(json.msg)
                if(json.code){
                    getCartList()
                }
            },true,true);
        }
        getCartList()
    </script>
</div>
{/block}